<template>
    <div class="white-box">
        <div v-for="(item, index) in state.options" class="mt-10 mb-20">
            <div class="flex items-baseline">
                <h3>{{ item.name }}</h3>
                <span
                    v-if="[1, 2, 8].includes(item.type)"
                    class="font-size-12 ml-5 color-#777"
                    >{{
                        [1, 8].includes(item.type)
                            ? "只能配置一项"
                            : "至少配置一项"
                    }}</span
                >
            </div>

            <el-checkbox-group
                v-model="item.sids"
                v-loading="item.isLoading"
                class="mt-10"
            >
                <el-checkbox
                    v-for="config in item.configs"
                    :key="config.sid"
                    :label="config.name"
                    :value="config.sid"
                    @change="onChange(config.sid, item)"
                />
            </el-checkbox-group>
        </div>
    </div>
</template>

<script setup>
import { inject, ref, onMounted, reactive } from "vue";
import {
    getOrderConfigs,
    getConfigsByType,
    editOrderConfig,
} from "@/apis/order/config.js";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();

const $message = inject("$message");
const state = reactive({
    options: [],
});

onMounted(async () => {
    const res = await dictStore.getDictMembers("order_config_type");
    state.options = res.map((item) => {
        return {
            name: item.memberName,
            type: item.memberKey,
            configs: [], // 所有配置
            sids: [], // 已选择配置
            isLoading: false, // 是否正在加载
        };
    });
    getAllTypeConfigs();
});

const getConfigured = async (option) => {
    const res = await getOrderConfigs({ type: option.type });
    if (res.data.code === 200) {
        option.sids = res.data.data.map((item) => item.sid);
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const getConfigs = async (option) => {
    option.isLoading = true;
    const res = await getConfigsByType({ type: option.type });
    option.isLoading = false;
    if (res.data.code === 200) {
        option.configs = res.data.data;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const getAllTypeConfigs = () => {
    state.options.forEach((option) => {
        getConfigs(option);
        getConfigured(option);
    });
};

// 多选框变化时触发
const onChange = async (value, option) => {
    // 至少配置一项
    let { type } = option;
    if (!option.sids.length) {
        option.sids.push(value);
        return $message({ message: "至少配置一项", type: "warning" });
    }
    if ([1, 8].includes(type)) {
        option.sids = [value];
    }
    // 保存配置
    option.isLoading = true;
    const res = await editOrderConfig({ type, sids: option.sids });
    option.isLoading = false;
    if (res.data.code == 200) {
        $message({ message: "配置成功", type: "success" });
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
    getConfigured(option);
};
</script>
